<template>
  <el-row style="width: 100%">
    <!-- 左边 -->
    <el-col :span="20">
      <span>{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row>
        <el-col :span="12" style="text-align: right">{{
          treeNode.manager
        }}</el-col>
        <el-col :span="12" style="text-align: right">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit"
                >编辑部门</el-dropdown-item
              >
              <el-dropdown-item v-if="!isRoot" command="del"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from "@/api/departments";
export default {
  name: "tree-tools",
  props: {
    treeNode: {
      type: Object, // 对象类型
      required: true, // 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错
    },
    isRoot: {
      type: Boolean,
      // 设置它的默认值
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleCommand(command) {
      //   this.$message("点击的是 " + command);
      switch (command) {
        case "add":
          this.$emit("addDept", this.treeNode.id);
          break;
        case "edit":
          this.$emit("editDept", this.treeNode.id);
          break;
        case "del":
          this.$confirm("此操作将永久删除该组织架构, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              await delDepartments(this.treeNode.id);
              this.$emit("getDep");
              this.$message.success({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch(() => {
              this.$message.error({
                type: "info",
                message: "已取消删除",
              });
            });

          break;
      }
    },
  },
};
</script>

<style>
</style>